<!--
 @description 经销商档案管理-商家档案详情
 @fileName DetailInfo.vue
 @author zengqiongying
 @created 2023/04/21 12:44:44
-->
<template>
  <div class="archive-change-detail">
    <qmp-tabs v-model:active="tabActive" :offset-top="offsetTop" scrollspy sticky>
      <qmp-tab title="基本信息">
        <Card no-mg :round="false">
          <div class="shop-title">{{ detail.code }} {{ detail.name }}</div>
        </Card>
        <Card no-mg :round="false">
          <Cell title="客户二级分类" default-value="--" readonly :modelValue="detail.twoCategoryName" />
          <Cell title="所属办事处" default-value="--" readonly :modelValue="detail.agencyName" />
          <Cell title="账号状态" default-value="--" custom readonly>
            <span
              :class="{
                'color-normal': [1, '1'].includes(detail.businessStatus), // 1 经营正常
                'color-grey': ![1, '1', 6, '6'].includes(detail.businessStatus), // 4 预营业、2 预停业、3 已停业 ， 5 未开业停用
                'color-error': [6, '6'].includes(detail.businessStatus) // 经营异常
              }"
            >
              {{ detail.businessStatusName }}
            </span>
          </Cell>
          <Cell title="客户所辖城市级别" default-value="--" readonly :modelValue="detail.cityLevelName" />
          <Cell v-if="businessTypeName.length > 0" title="经营业务类型" is-column custom default-value="--" readonly>
            <Tags :list="businessTypeName" />
          </Cell>
          <Cell title="经营总面积(㎡)" default-value="--" custom readonly> {{ detail.operateArea }}m<sup>2</sup> </Cell>
          <Cell
            title="是否电商服务商"
            default-value="--"
            readonly
            :modelValue="[1, '1'].includes(detail.isElecBusiniess) ? '是' : '否'"
          />
          <Cell title="市场层级" default-value="--" readonly :modelValue="detail.marketLevelName" />
          <Cell
            title="加盟时间"
            default-value="--"
            readonly
            :modelValue="parseTime(detail.creationTime, '{y}年{m}月{d}日')"
          />
          <Cell
            title="是否经营异常"
            default-value="--"
            readonly
            :modelValue="ctmCustomer ? ([1, '1'].includes(ctmCustomer.isManageAnomaly) ? '是' : '否') : '否'"
          />
          <template v-if="ctmCustomer && [1, '1'].includes(ctmCustomer.isManageAnomaly)">
            <Cell
              title="异常类型"
              default-value="--"
              readonly
              :modelValue="ctmCustomer.manageAnomalyType"
              dictTypeCode="CTM_ABNORMAL_OPERATION_TYPE"
            />
            <Cell title="经营异常备注" default-value="--" readonly is-column custom>
              {{ ctmCustomer.manageAnomalyTypeRemark }}
            </Cell>
          </template>
          <template v-if="detail.oneCategoryCode === 'Z230'">
            <Cell title="关联零售商家编码" default-value="--" readonly :modelValue="detail.associatedDealerCode" />
            <Cell title="关联零售商家名称" default-value="--" readonly :modelValue="detail.associatedDealerName" />
          </template>
        </Card>
      </qmp-tab>
      <qmp-tab title="门店信息">
        <Card title="门店信息" no-mg :round="false">
          <qmp-empty v-if="shopList.length === 0" description="暂无门店信息" image-size="60px" />
        </Card>
        <template v-if="shopList.length > 0">
          <qmp-collapse v-model="activeNames" readonly accordion>
            <Card no-mg :round="false">
              <qmp-collapse-item v-for="(shopItem, i) in shopList" :key="i" :name="shopItem.code" class="item">
                <template #title>
                  <div v-if="shopItem.shopDetailDTO" class="shop-title" style="padding: 0">
                    {{ shopItem.shopDetailDTO.code }} <span>{{ shopItem.shopDetailDTO.name }}</span>
                  </div>
                </template>
                <template #right-icon>
                  <img
                    width="16"
                    height="16"
                    v-if="activeNames === shopItem.code"
                    src="@/assets/images/solid-bottom.png"
                  />
                  <img width="16" height="16" v-else src="@/assets/images/solid-right.png" />
                </template>
                <ShopItem :modelValue="shopItem" />
              </qmp-collapse-item>
            </Card>
          </qmp-collapse>
        </template>
      </qmp-tab>
      <qmp-tab title="收货地址">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">收货地址</div>
              <div v-if="addressList.length > 0" class="more" @click="toPage('address')">详情</div>
            </div>
          </template>
          <template v-if="addressList.length > 0">
            <Cell v-for="(item, i) in addressList" :key="i" is-column custom readonly>
              <div class="dis-detail-item">
                <div class="name">{{ item.name }}</div>
                <div class="color-grey">
                  {{ item.address }}
                </div>
                <div class="person">
                  {{ item.firstReceiver }} <span class="ml8">{{ item.firstReceiverPhone }}</span>
                </div>
              </div>
            </Cell>
          </template>
          <qmp-empty v-else description="暂无收货地址" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="业务账号">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">业务账号信息</div>
              <div v-if="accountList.length > 0" class="more" @click="toPage('account')">详情</div>
            </div>
          </template>
          <template v-if="accountList.length > 0">
            <Cell v-for="(item, i) in accountList" :key="i" is-column custom readonly>
              <div class="dis-detail-item">
                <div>
                  {{ item.accountCode }} <span class="ml8">{{ item.accountName }}</span>
                </div>
                <div class="person">{{ item.accountTypeName }}</div>
              </div>
            </Cell>
          </template>
          <qmp-empty v-else description="暂无业务账号" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="送达方">
        <Card title="关联送达方" no-mg :round="false">
          <template v-if="channelCusStoreList.length">
            <Cell v-for="(item, i) in channelCusStoreList" :key="i" is-column custom readonly>
              <div class="partner-cell">
                <div>
                  {{ item.code }} <span class="ml8">{{ item.name }}</span>
                </div>
              </div>
            </Cell>
          </template>
          <qmp-empty v-else description="暂无关联送达方" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="联系人">
        <Card title="账号联系人" no-mg :round="false">
          <template v-if="contactList.length > 0">
            <Cell v-for="(item, i) in contactList" :key="i" is-column custom readonly>
              <div class="partner-cell">
                <div>
                  {{ item.name }} <span class="ml8">{{ item.contactPhone }}</span>
                </div>
                <div>{{ item.contactTypeName }}</div>
              </div>
            </Cell>
          </template>
          <qmp-empty v-else description="暂无账号联系人" image-size="60px" />
        </Card>
      </qmp-tab>
    </qmp-tabs>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, toRefs, reactive, watch, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import Tags from '@/components/Tags/index.vue'
  import ShopItem from './ShopItem.vue'
  import { parseTime } from '@/utils'
  import { detail } from '@/apis/dealerMarketing/Customer'

  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'DealerInfoCustomerDetail',
    components: { Card, Cell, Tags, ShopItem },
    props: {
      code: {
        type: String,
        default: ''
      }
    },
    setup(props, ctx) {
      const $router = useRouter()
      const datas = reactive<anyObjectModle>({
        tabActive: '基本信息',
        offsetTop: '46px',
        detail: {},
        customerDetail: {},
        activeNames: ''
      })

      const getDetail = () => {
        const code = `${props.code}`
        detail(code).then((res) => {
          const d = res.data || {}
          datas.customerDetail = d
          datas.detail = d?.customerDetailDTO || {}
        })
      }

      const businessTypeName = computed(() => {
        const { businessTypeName } = datas.detail
        if ([null, undefined, ''].includes(businessTypeName)) return []
        return businessTypeName.split(',')
      })

      const ctmCustomer = computed(() => {
        return datas.customerDetail?.ctmCustomerDTO || false
      })
      // 门店
      const shopList = computed(() => {
        const list = datas.customerDetail?.ctmShopDTOS || []
        if (list.length) datas.activeNames = (list[0] && list[0].code) || ''
        return list
      })
      // 收货地址
      const addressList = computed(() => {
        return datas.customerDetail?.customerAddressDTOS || []
      })
      // 业务账号信息
      const accountList = computed(() => {
        return datas.customerDetail?.accountDTOS || []
      })
      // 账号送达方
      const channelCusStoreList = computed(() => {
        return datas.customerDetail?.channelCusStoreDTOS || []
      })
      // 账号联系人
      const contactList = computed(() => {
        return datas.customerDetail?.contactDTOS || []
      })

      watch(
        () => props.code,
        () => {
          getDetail()
        },
        {
          immediate: true
        }
      )
      onMounted(() => {
        const el = document.querySelector('.qmp-nav-bar--fixed')
        const rect = el && el.getBoundingClientRect()
        datas.offsetTop = `${rect?.height}px`
      })

      const toPage = (path: string) => {
        $router.push({
          path: '/dealerCustomer/detail/' + path,
          query: {
            code: props.code
          }
        })
      }

      getDetail()

      return {
        ...toRefs(datas),
        businessTypeName,
        ctmCustomer,
        addressList,
        accountList,
        shopList,
        channelCusStoreList,
        contactList,
        parseTime,
        toPage
      }
    }
  })
</script>
<style lang="less" scoped>
  .archive-change-detail {
    /deep/ .group-card {
      margin-left: 0;
      margin-right: 0;
    }
    /deep/ .qmp-tab {
      font-weight: bold;
    }
    .c-tab-title {
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-global-weaker);
      .name {
        font: var(--font-main-title-strengthen);
        color: var(--texticon-default-strong);
      }
      .more {
        margin-left: auto;
        display: flex;
        align-items: center;
        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        &::before {
          content: '';
          width: 24px;
          height: 24px;
          margin-left: 4px;
          background-size: 24px 24px;
          background-repeat: no-repeat;
          background-image: url(~@/assets/images/more.png);
        }
      }
    }
  }
  .ml8 {
    margin-left: 8px;
  }

  .shop-title {
    padding: 0 14px;
    font: var(--font-card-title);
    color: var(--texticon-color-brand-normal);
    text-align: left;
    span {
      margin-left: 10px;
    }
  }

  .dis-detail-item {
    font: var(--font-main-body);
    color: var(--texticon-default-strong);
    .name {
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);
      margin-bottom: 2px;
    }
    .person {
      margin-top: 4px;
      color: var(--texticon-color-brand-normal);
    }
  }
  .partner-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-left: auto;
    }
  }
  .item {
    /deep/ .qmp-collapse-item__content {
      padding: 0;
    }
    .qmp-collapse-item--border::after,
    .qmp-hairline--top-bottom::after,
    .qmp-hairline-unset--top-bottom::after {
      display: none;
    }
  }
</style>
